<template>
  <div class="h5box">
    <div id="play_window" ></div>
  </div>
</template>
<script>
const IS_MOVE_DEVICE = document.body.clientWidth < 992; // 是否移动设备
export default {
  props: ["urls",'screenNum'],
  name:'h5player',
  data() {
    return {
      player: null,
      currentWindowIndex:0,
      videoListLength:0
    };
  },
  //     watch: {
  //     windowHeight(val) {
  //       let that = this;
  //       this.offsetHeight = (val / 1080) * 386;
  //     },
  //   },
  mounted() {
    setTimeout(() => {
      // 2 秒之后运行。
      this.createPlayer();
      this.init();
    }, 2000);
     
  },
  watch:{
    urls:{
      handler(val) {
         if(val){
          console.log('-----1 ---step调起播放')
           this.realplay();
          //  播放列表长度修改
           this.videoListLength  < this.screenNum
           ?this.videoListLength ++
           :''
          //下一个播放窗口修改
           this.currentWindowIndex < this.screenNum-1 
           ? this.currentWindowIndex++ 
           : this.currentWindowIndex = 0
           console.log('-----2 ---step修改下一个播放窗口',this.currentWindowIndex)
         }
      },
      deep:true,
      //immediate: true
    },
    screenNum:{
      deep:true,
      //immediate: true,
      handler(val) {
        console.log('视窗数',val,'当前播放窗口',this.currentWindowIndex)
        this.arrangeWindow()
        if(this.videoListLength <this.screenNum){
          this.currentWindowIndex = this.videoListLength
        }else {
          this.currentWindowIndex = 0
          this.videoListLength = this.screenNum
        }
      }
    }
  },
  methods: {
    init() {
      // 设置播放容器的宽高并监听窗口大小变化
      window.addEventListener("resize", () => {
        this.player.JS_Resize();
      });
      
    },
    createPlayer() {
      this.player = new window.JSPlugin({
        szId: "play_window",
        szBasePath: "/static/h5player",
        iMaxSplit: this.screenNum||4,
        iCurrentSplit: IS_MOVE_DEVICE ? 1 : 2,
        openDebug: false,
        oStyle: {
          borderSelect: IS_MOVE_DEVICE ? "#000" : "#FFCC00",
        },
      });

      // 事件回调绑定
      this.player.JS_SetWindowControlCallback({
        windowEventSelect: function (iWndIndex) {
          //插件选中窗口回调
          console.log("windowSelect callback: ", iWndIndex);
        },
        pluginErrorHandler: function (iWndIndex, iErrorCode, oError) {
          //插件错误回调
          console.log("pluginError callback: ", iWndIndex, iErrorCode, oError);
        },
        windowEventOver: function (iWndIndex) {
          //鼠标移过回调
          //console.log(iWndIndex);
        },
        windowEventOut: function (iWndIndex) {
          //鼠标移出回调
          //console.log(iWndIndex);
        },
        windowEventUp: function (iWndIndex) {
          //鼠标mouseup事件回调
          //console.log(iWndIndex);
        },
        windowFullCcreenChange: function (bFull) {
          //全屏切换回调
          console.log("fullScreen callback: ", bFull);
        },
        firstFrameDisplay: function (iWndIndex, iWidth, iHeight) {
          //首帧显示回调
          console.log(
            "firstFrame loaded callback: ",
            iWndIndex,
            iWidth,
            iHeight
          );
        },
        performanceLack: function () {
          //性能不足回调
          console.log("performanceLack callback: ");
        },
      });

      
    },
    
    /* 预览&对讲 */
    realplay() {
      let { player, mode, urls } = this,
        index = this.currentWindowIndex,
        playURL = urls.realplay;
      console.log('-----当前播放窗口-----',index)
      player.JS_Play(playURL, { playURL, mode }, index).then(
        () => {
          console.log("realplay success");
        },
        (e) => {
          console.error(e);
        }
      );
    },
    arrangeWindow(){
      let splitNum = Math.sqrt(this.screenNum)
          this.player.JS_ArrangeWindow(splitNum).then(
            () => { console.log(`arrangeWindow to ${splitNum}x${splitNum} success`) },
            e => { console.error(e) }
          )
    }
  },
};
</script>
<style lang="less">
.h5box{
  width: 100%;
  height: 100%;
  #play_window{
    width: 100%;
    height: 100%;
  }
}
</style>
